<template>
  <div>
    <section>
      <el-form
        ref="form"
        :model="queryForm"
        label-width="70px"
        :inline="true"
        class="queryForm adjustCondition"
      >
        <el-form-item label="车牌号:" label-width="61px">
          <div style="width: 230px">
            <el-input
              v-model="queryForm.truckNumber"
              size="small"
              placeholder="请输入车牌号查询"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="but-container" style="margin-left: 40px">
            <el-button
              type="primary"
              size="small"
              class="search-btn"
              @click="
                getList(
                  page,
                  1,
                  orderBy.name,
                  orderBy.method,
                  queryForm.truckNumber
                )"
              >查询</el-button>
            <el-button size="small" @click="dataet">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <div>
      <el-button
        style="margin-right:5px"
        type="primary"
        size="small"
        @click="add"
        v-if="hasPermission('truck:truckCreditScore:add')"
        >新增</el-button
      >
      <!-- <el-button
        style="margin-left: 15px;margin-right:5px"
        type="primary"
        size="small"
        @click="delRegiste(tableData)"
        v-if="hasPermission('truck:truckCreditScore:del')"
      >删除</el-button
      > -->
    <section class="right-but" style="display:flex;margin-bottom:10px">
      <el-button type="text" style="margin-right:-13px;cursor:pointer;" @click="refreshList">
        <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
      </el-button>
      <PopoverBut :checkedProps="checkedProps" style="" :options="options"
                  @getCheckeds="handlerCloumn"></PopoverBut>

    </section>
    </div>
    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
       @sort-change="sortthiscolumn"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column
        type="selection"
        width="55">
      </el-table-column> -->
      <el-table-column type="index" label="序号" width="70"  align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="truck.truckNumber" label="车牌号" min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.truck && scope.row.truck.truckNumber">{{scope.row.truck.truckNumber}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="ruleType" label="类型" min-width="100">
        <template slot-scope="scope">
          {{$dictUtils.getDictLabel("scoreRuleType", scope.row.ruleType, "") | noValue}}
        </template>
      </el-table-column>
      <el-table-column prop="score" label="扣分值" min-width="100">
        <template slot-scope="scope">
          {{scope.row.score | thousandSep}}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="扣分描述"  min-width="110">
        <template slot-scope="scope">
          {{scope.row.remark | noValue}}
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="记录时间" min-width="200"> </el-table-column>
      <el-table-column prop="state" label="状态" width="110px">
        <!-- <template slot-scope="scope">
          {{$dictUtils.getDictLabel("scoreState", scope.row.state, "")}}
        </template> -->
        <template slot-scope="scope">
          <section class="state normal" v-if="scope.row.state===1">
            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
          <section class="state empty" v-else>
            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
        </template>
      </el-table-column>
      <span v-for="(item,index) in checkedProps" :key="index">
              <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy && scope.row.createBy.loginName">
                      {{scope.row.createBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
         <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy && scope.row.updateBy.loginName">
                      {{scope.row.updateBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>

      </span>
      <el-table-column prop="adddatas" label="操作" width="150px">
        <template slot-scope="scope">
          <template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary" v-if="item.value !=='-1'&& item.value!==(scope.row.state+'')" :underline="false" @click="isRepeat(item.value,scope.row)"  :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state"
            >{{item.label}}
            </el-link>
          </template>
          <el-link type="primary" :underline="false" @click="edit(scope.row)"
          v-if="hasPermission('truck:cardRegister:edit')"
            >修改</el-link
          >
          <el-link type="primary" :underline="false" @click="del(scope.row.id)"
          v-if="hasPermission('truck:truckCreditScore:del')"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,sizes,prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <EditForm
      ref="editForm"
      @refreshDataList="getList(page, 1, '', '')"
    ></EditForm>
  </div>
</template>
<script>
import { getList, delRegiste, editState } from '@/api/truck/creditScore/creditScore.js'
import EditForm from './editForm'
import PopoverBut from '@/components/button/popoverBut'
const options1 = []
export default {
  components: {
    EditForm,
    PopoverBut
  },
  data () {
    return {
      checkedProps: options1,
      options: [
        {label: '创建人', key: 'createBy.loginName'},
        {label: '创建时间', key: 'createDate'},
        {label: '上次操作人', key: 'updateBy.loginName'},
        {label: '上次操作时间', key: 'updateDate'}
      ],
      queryForm: {
        truckNumber: ''
      },
      truck: {
        truckNumber: ''
      },
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      ids: '',
      tableData: [],
      selectDatas: [],
      orderBy: {
        name: '',
        method: 'asc'
      },
      loading: false
    }
  },
  methods: {
    // 获取列表带分页
    getList (params, props, orderName, orderByAORC, truckNumber) {
      this.loading = true
      getList({
        pageSize: params.pageSize,
        pageNo: params.pageNo,
        props: props,
        orderBy: "create_date",
        orderByAORC: "desc",
        truck: {
          truckNumber: truckNumber
        }
      }).then(({data}) => {
        if (data.code === '200') {
          this.tableData = data.result.list
          this.page.total = data.result.count
          this.loading = false
        }
      })
    },
    // 停用确认
    isRepeat (event, row) {
      if (row.state === 1) {
        console.log(row)
        this.msg = '停用后，该信用分将不可被使用，确认停用吗？';
        this.editState(event, row.id)

      } else {
        this.msg = '您是否要' + this.$dictUtils.getDictLabel("state", event, "") + '?'
        this.editState(event, row.id)
      }
    },
    // 改变状态
    editState (state, id) {
      this.$confirm(this.msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        editState({id: id, state: state}).then(res => {
          if (res.data.code === '200') {
            this.getList(this.page, 3, this.orderBy.name, this.orderBy.method)
            this.$message({
              type: 'success',
              message: '状态修改成功'
            })
          }
        })
      })
    },
    refreshList () {
      this.getList(
        this.page,
        1,
        this.orderBy.name,
        this.orderBy.method,
        this.queryForm.truckNumber
      )
    },
    // 重置查询条件
    dataet () {
      this.queryForm = {}
      this.getList(this.page, 1, '', 'asc')
    },
    // 是否显示某列数据
    handlerCloumn (e) {
      this.checkedProps = e
      // console.log(e)
    },
    edit (row) {
      this.$refs.editForm.init('edit', row)
    },
    add () {
      this.$refs.editForm.init('add')
    },
    handleSelectionChange (val) {
      this.selectDatas = val
    },
    //单个删除
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((data) => {
        delRegiste({
          ids: id
        }).then(({data}) => {
          if (data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList(this.page, 1, '', '')
          }
        })
      })

    },

    delRegiste () {
      this.ids = ''
      this.selectDatas.forEach(row => {
        this.ids += (row.id + ',')
      })
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((data) => {
        delRegiste({
          ids: this.ids
        }).then(({data}) => {
          if (data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList(this.page, 1, '', '')
          }
        })
      })
    },
    // 卡类型排序
    sortthiscolumn (e) {},
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList(this.page, 1, '', 'asc')
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList(this.page, 1, '', 'asc')
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }
  },
  mounted () {
    this.getList(this.page, 1, '', 'asc')
  }
}
</script>
<style lang="scss" scoped>
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
</style>
